<!--  -->
<template>
    <div class="modal-simple">
        <div class="modal-icon-wrapper">
            <div class="modal-circle-o"></div>
            <div class="modal-circle-i"></div>
            <i class="platformicon icon_jinggao modal-icon"></i> 
        </div>
        <p  class="modal-text" v-show="params.content">{{params.content}}</p>
        <div class="modal-btn" @click="simpleClose">{{$t('cmlpanel.confirm')}}</div>
    </div>
    
</template>

<script>
import EventBus from '@/assets/js/app/cmlpanel/util/bus.js'
export default {
    name: 'modalSimple',
    components: {},
    props: ['data'],
    data() {
        return {
            params: {
                type: '',
                content: '',
                onClose: function(){}
            }
        };
    },
    computed: {},
    watch: {
        data: {
            handler: function(){
                this.params = this.data;
            },
            immediate: false
        }
    },
    methods: {
        init(){
            let _this = this
            this.tl = new TimelineMax({
                autoRemoveChildren: true,
                onStart: function(){
                }
            })
            let tw1 = TweenMax.to('.modal-simple', 0.3, {opacity: 1})
            let tw4 = TweenMax.to('.modal-simple .modal-icon-wrapper', 0.3, { scale: 1, opacity: 1, ease: Power0.easeInOut})
            let tw5 = TweenMax.to('.modal-simple .modal-icon', .2, {opacity: 1, scale: 1})
            let tw8 = TweenMax.to('.modal-simple .modal-text', 0.3, {opacity: 1 })
            let tw9 = TweenMax.to('.modal-simple .modal-btn', 0.3, {opacity: 1 })
            this.tl.addLabel('start')
            this.tl
                .add(tw1, 'start+=0')
                .add(tw4, 'start+=0.1')
                .add(tw5, 'start+=0.2')
                .add(tw8, 'start+=.4')
                .add(tw9, 'start+=.4')
        },
        reset(){
            TweenMax.set('.modal-simple', {opacity: 0})
            TweenMax.set('.modal-simple .modal-icon-wrapper', { scale: 0, opacity: 0})
            TweenMax.set('.modal-simple .modal-icon', {opacity: 0, scale: 0})
            TweenMax.set('.modal-simple .modal-text', {opacity: 0 })
            TweenMax.set('.modal-simple .modal-btn', {opacity: 0})
        },
        destroy(){
            this.reset()
            if(this.params.onClose){
                if(typeof this.params.onClose == 'function'){
                    this.params.onClose()
                }
            }
            // EventBus.$emit('closeModal')
        },
        simpleClose(){
            app.modal.destroy()
        }
    },
    created() {

    },
    mounted() {
        let params = {type: 'success', content: 'content'}
        EventBus.$emit('openModal', params)
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss'>
//@import url(); 引入公共css类
@import '../../../css/_lib-variable.scss';
.modal-simple {
    opacity: 0;
}
 .modal-icon-wrapper {
    position: relative;
    top: 18px;
    width: 132px;
    height: 132px;
    margin: 0 auto;
    text-align: center;
    line-height: 132px;
    opacity: 0;
    transform: scale(.2);
    .modal-circle-o {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        animation: circleAniOut 1s  linear 0s infinite;
    }
    .modal-circle-i {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        animation: circleAniIn 1s  linear .6s infinite;
    }
    .icon_jinggao {
        font-size: 50px;
        opacity: 0;
        transform: scale(0);
    }
}
.modal-text {
    position: relative;
    top: 20px;
    padding: 0 60px;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    opacity: 0;
}
.modal-btn {
    position: relative;
    top: 10px;
    width: 140px;
    height: 40px;
    margin: 30px auto 0;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    opacity: 0;
}
.success {
    .modal-circle-o {
        border: 2px solid $modal-success-color5;
    }
    .modal-circle-i {
        border: 2px solid $modal-success-color5;
    }
    .modal-text {
        color: $modal-success-color;
    }
    .modal-btn {
        color: $modal-success-color;
        border: 1px solid $modal-success-color;
        box-shadow: 0 0 10px $modal-success-color3, 0 0 10px $modal-success-color3 inset;
        &:hover{
            background: $modal-success-color;
            color: #000;
        }
    }
    .icon_jinggao {
        color: $modal-success-color;
        text-shadow: 0 0 16px $modal-success-color6, 2px 2px 12px $modal-success-color;
    }
}
.warning {
    
    .modal-circle-o {
        border: 2px solid $modal-warn-color5;
    }
    .modal-circle-i {
        border: 2px solid $modal-warn-color5;
    }
    .modal-text {
        color: $modal-warn-color;
    }
    .modal-btn {
        color: $modal-warn-color;
        border: 1px solid $modal-warn-color;
        box-shadow: 0 0 10px $modal-warn-color3, 0 0 10px $modal-warn-color3 inset;
        &:hover{
            background: $modal-warn-color;
            color: #000;
        }
    }
    .icon_jinggao {
        color: $modal-warn-color;
        text-shadow: 0 0 16px $modal-warn-color6, 2px 2px 12px $modal-warn-color;
    }
}
.error {
    .modal-circle-o {
        border: 2px solid $modal-error-color5;
    }
    .modal-circle-i {
        border: 2px solid $modal-error-color5;
    }
    .modal-text {
        color: $modal-error-color;
    }
    .modal-btn {
        color: $modal-error-color;
        border: 1px solid $modal-error-color;
        box-shadow: 0 0 10px $modal-error-color3, 0 0 10px $modal-error-color3 inset;
        &:hover{
            background: $modal-error-color;
            color: #000;
        }
    }
    .icon_jinggao {
        color: $modal-error-color;
        text-shadow: 0 0 16px $modal-error-color6, 2px 2px 12px $modal-error-color;
    }
}
@keyframes circleAniOut {
    0% {transform: scale(0);opacity: 0;}
    50% {transform: scale(.8);opacity: 1;}
    100% {transform: scale(1);opacity: 0;}
}
@keyframes circleAniIn {
    0% {transform: scale(0);opacity: 0;}
    50% {transform: scale(.8);opacity: 1;}
    100% {transform: scale(1);opacity: 0;}
}
</style>